<template>
  <div class="app-container">

    <!-- 表头条件表单 -->
    <el-form :inline="true" :model="eduTeacherQuery" class="form-inline">
      <el-form-item label="讲师名称">
        <el-input v-model="eduTeacherQuery.name" placeholder="讲师名称"></el-input>
      </el-form-item>
      <el-form-item label="讲师级别">
        <el-select v-model="eduTeacherQuery.level" clearable placeholder="讲师级别">
          <el-option label="高级讲师" value="1"></el-option>
          <el-option label="首席讲师" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker type="date" placeholder="开始时间" v-model="eduTeacherQuery.begin" style="width: 100%;" format="yyyy年MM月dd日" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker type="date" placeholder="结束时间" v-model="eduTeacherQuery.end" style="width: 100%;" format="yyyy年MM月dd日" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAllTeachers">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格渲染 -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column fixed prop="id" label="讲师ID" sortable></el-table-column>
      <el-table-column fixed label="讲师姓名">
        <template slot-scope="scope">
          <span style="color: orange;">{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed prop="intro" label="讲师简介"></el-table-column>
      <el-table-column fixed prop="career" label="讲师资历"></el-table-column>
      <el-table-column fixed label="讲师级别">
        <template slot-scope="scope">
          {{scope.row.level==1?'高级讲师':'首席讲师'}}
        </template>
      </el-table-column>
      <el-table-column fixed label="讲师头像" align="center" width="80">
        <template slot-scope="scope">
            <img :src="scope.row.avatar" width="40" height="40" class="head_pic"
              onerror="javascript:this.src='https://gitee.com/wuhunyu/images/raw/master/learn/images/20210114220355.JPG'"/>
        </template>
      </el-table-column>
      <el-table-column fixed prop="gmtCreate" label="创建时间" sortable></el-table-column>
      <el-table-column fixed prop="gmtModified" label="修改时间" sortable></el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <router-link :to="'/teacher/addOrUpdate/'+scope.row.id">
            <el-button size="mini">编辑</el-button>
          </router-link>
          <el-button size="mini" type="danger" @click="deleteTeacherById(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页条 -->
    <div class="block">
      <el-pagination
        @current-change="changeCurrent"
        @size-change="changeLimit"
        :current-page="eduTeacherQuery.current"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="eduTeacherQuery.limit"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

  // 引入需要的js
  import teacher from '@/api/teacher'

  export default {

    // 核心代码
    data() {
      return {
        // 设置参数
        // 请求必须参数
        eduTeacherQuery: {  // 讲师列表查询参数
          current: 0,
          limit: 10,
          name: "",
          level: "",
          begin: "",
          end: ""
        },
        total: 0, // 总记录数
        // 返回结果集合
        list: []
      }
    },
    // 页面渲染之前调用方法
    created() {
      // 调用查询讲师列表信息方法
      this.getAllTeachers();
    },
    // 方法定义
    methods: {
      // 查询讲师列表信息
      getAllTeachers() {
        teacher.getAllTeachers(this.eduTeacherQuery)
          // 访问成功
          .then(res => {
              // 结果集
              this.list=res.data.items;
              // 总记录数
              this.total=res.data.total;
            }
          )
          // 访问失败
          .catch(err => {
            this.$message.error('查询失败');
            }
          );
      },
      // 跳转当前页
      changeCurrent(current) {
        this.eduTeacherQuery.current=current;
        this.getAllTeachers();
      },
      // 修改当前页面最大查看记录数
      changeLimit(limit) {
        this.eduTeacherQuery.limit=limit;
        this.getAllTeachers();
      },
      // 逻辑删除一条讲师记录
      deleteTeacherById(teacherInfo) {
        // 提示是否真的要删除
        this.$confirm(`确定删除讲师：<span style="color: orange;">${teacherInfo.name}</span> ?`, '删除讲师记录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          dangerouslyUseHTMLString: true  // 使用html片段
        }).then(() => {
          // 执行删除操作
          teacher.deleteTeacherById(teacherInfo.id)
            .then(res => {
                // 重新渲染表格
                this.getAllTeachers();
                // 提示信息
                this.$message({
                  type: 'success',
                  message: '删除成功',
                });
              }
            ).catch(err => {
                this.$message.error('删除失败');
              }
            );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }

    }

  }

</script>
